<template>
	<view style="width: 100vw;position: relative;">

		<!-- <status-bar></status-bar> -->
		<myLoading v-if="isLoading"></myLoading>
		<template v-else>

			<image style="width: 100%;margin-top: -30rpx;" :src="imgurl" mode="widthFix"></image>
			<view @click="goMy" style="position: absolute;right:15px;top: 45px;width: 80rpx;height: 70rpx;">
			</view>


			<view @click="setImg(1)" style="position: absolute;left:30rpx;top: 45px;width: 120rpx;height: 75rpx;">
			</view>

			<view @click="setImg(2)" style="position: absolute;left:150rpx;top: 45px;width: 120rpx;height: 75rpx;">
			</view>

			<view @click="setImg(3)" style="position: absolute;left:270rpx;top: 45px;width: 120rpx;height: 75rpx;">
			</view>
			<view @click="setImg(4)" style="position: absolute;left:390rpx;top: 45px;width: 120rpx;height: 75rpx;">
			</view>
			<view @click="gomessage" style="position: absolute;left:510rpx;top: 45px;width: 120rpx;height: 75rpx;">
			</view>


			<view @click="showModel" style="position: absolute;right:30rpx;bottom: 130rpx;left:30rpx;height: 160rpx;">
			</view>
			
			<!-- 流水 -->
			<view  v-if="index == 1"
				style="position: absolute;left:40rpx;top: 227rpx;width: 150rpx;height: 65rpx;background-color: #fee1cf;display: flex;align-items: center;justify-content: center;">
				<view style="display: flex;align-items: center;font-size: 53rpx;font-weight: 700;">
					{{ dailyRevenueInt }}</view>
				<view style="display: flex;align-items: flex-end;font-size: 33rpx;font-weight: 700;margin-top: 10rpx;">.{{dailyRevenueDec}}</view>
			</view>
			
			

			<!-- 口碑 -->
			<view  v-if="index == 1"
				style="position: absolute;left:200rpx;top: 227rpx;width: 150rpx;height: 65rpx;background-color: #fee1cf;display: flex;align-items: center;justify-content: center;">
				<view style="display: flex;align-items: center;font-size: 53rpx;font-weight: 700;">
					{{ reputationInt }}</view>
				<view style="display: flex;align-items: flex-end;font-size: 33rpx;font-weight: 700;margin-top: 10rpx;">.{{reputationDec}}</view>
			</view>


			<!-- 接单数 -->
			<view v-if="index == 1"
				style="position: absolute;left:350rpx;top: 227rpx;width: 150rpx;height: 65rpx;background-color: #fee1cf;display: flex;align-items: center;justify-content: center;">
				<view style="display: flex;align-items: center;font-size: 53rpx;font-weight: 700;">
					{{ orderCount }}</view>
			</view>




			<!-- 在线时长 -->
			<view v-if="index == 1"
				style="position: absolute;left:505rpx;top: 227rpx;width: 150rpx;height: 65rpx;background-color: #fee1cf;display: flex;align-items: center;justify-content: center;">
				<view style="display: flex;align-items: center;font-size: 53rpx;font-weight: 700;">
					{{ onlineHoursInt }}</view>
				<view style="display: flex;align-items: flex-end;font-size: 33rpx;font-weight: 700;margin-top: 10rpx;">.{{onlineHoursDec}}</view>
			</view>



			<!-- 在线时长 -->
			<view v-if="index == 1"
				style="position: absolute;left:215rpx;top: 377rpx;width: 150rpx;height: 65rpx;background-color: #fee1cf;display: flex;align-items: center;justify-content: center;">
				<image src="../../static/31.gif" mode=""></image>
			</view>

			
			
			
			

		</template>
	</view>
</template>

<script>

import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
export default {
	components: {
		uniIcons
	},
	data() {
		return {
			isLoading: true,
			index: 1,
			formData: {
				name: '',
				phone: '',
				idCard: '',
				firstReceiveDate: '',
				avatar: ''
			},
			// 从本地缓存获取的数据
			dailyRevenue: 0,
			dailyRevenueInt: 0,
			dailyRevenueDec: 0,
			reputation: 0,
			reputationInt: 0,
			reputationDec: 0,
			orderCount: 0,
			orderCountInt: 0,
			orderCountDec: 0,
			onlineHours: 0,
			onlineHoursInt: 0,
			onlineHoursDec: 0,
		}
	},
	onLoad() {
		// 定义一个0.3-1的随机数
		let randomNum = Math.random() * 0.7 + 0.3;
		// 转换为毫秒
		let randomDelay = randomNum * 1000;
		// 延迟执行
		setTimeout(() => {
			setTimeout(() => {
				this.isLoading = false
			}, randomDelay)
		})
	},
	computed: {
		imgurl() {
			return `../../static/2${this.index}.jpg`
		}
	},
	onShow() {
		// 页面加载时，尝试从本地缓存获取数据
		this.loadUserData();
	},
	methods: {
		// 从本地缓存加载数据
		loadUserData() {
			try {
				const userData = uni.getStorageSync('userInfo');
				if (userData) {
					const parsedData = JSON.parse(userData);
					this.formData = parsedData;
					console.log('成功加载本地存储的数据:', parsedData);

					// 处理今日流水、口碑值、接单数、在线时长的分割
					this.processStoredData(parsedData);
				}
			} catch (error) {
				console.error('加载本地存储数据失败:', error);
			}
		},

		// 处理从本地缓存获取的数据并进行分割
		processStoredData(data) {
			// 处理今日流水
			const dailyRevenue = parseFloat(data.dailyRevenue) || 0;
			this.dailyRevenue = dailyRevenue;
			this.dailyRevenueInt = Math.floor(dailyRevenue);
			this.dailyRevenueDec = Math.round((dailyRevenue - this.dailyRevenueInt) * 100);

			// 处理口碑值
			const reputation = parseFloat(data.reputation) || 0;
			this.reputation = reputation;
			this.reputationInt = Math.floor(reputation);
			this.reputationDec = Math.round((reputation - this.reputationInt) * 100);

			// 处理接单数
			const orderCount = parseFloat(data.orderCount) || 0;
			this.orderCount = orderCount;
			this.orderCountInt = Math.floor(orderCount);
			this.orderCountDec = Math.round((orderCount - this.orderCountInt) * 100);

			// 处理在线时长
			const onlineHours = parseFloat(data.onlineHours) || 0;
			this.onlineHours = onlineHours;
			this.onlineHoursInt = Math.floor(onlineHours);
			this.onlineHoursDec = Math.round((onlineHours - this.onlineHoursInt) * 100);

			console.log('处理后的数据:', {
				dailyRevenue: { int: this.dailyRevenueInt, dec: this.dailyRevenueDec },
				reputation: { int: this.reputationInt, dec: this.reputationDec },
				orderCount: { int: this.orderCountInt, dec: this.orderCountDec },
				onlineHours: { int: this.onlineHoursInt, dec: this.onlineHoursDec }
			});
		},
		setImg(index) {
			this.index = index
		},
		goMy() {
			uni.navigateTo({
				url: '/pages/my/my'
			})
		},
		gomessage() {
			uni.navigateTo({
				url: '/pages/message/message'
			})
		},
		showModel() {
			uni.showModal({
				// title: '位置权限请求',
				content: '请开启确切位置权限，选择"始终允许"，用于基于您的位置进行订单指派',
				confirmText: '设置',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						// 用户点击了设置按钮，引导用户去系统设置
						// uni.openSetting({
						// 	success: (settingRes) => {
						// 		console.log('设置结果:', settingRes.authSetting);
						// 	}
						// });
						uni.navigateTo({
							url: '/pages/loading/loading'
						})
					} else if (res.cancel) {
						// 用户点击了取消按钮
						console.log('用户取消了位置权限请求');
					}
				}
			});
		}
	}
}

</script>

<style lang="scss" scoped></style>
